@import '@/styles/variable.scss';
@import '@/styles/mixin.scss';
// 阴影高度
$imgShadowH: .05rem;
$playlistBarH: .4rem;

.playlist-detail-page {
  scroll-behavior: smooth;
  .navbar {
    will-change: auto;
    color: #fff;
    background-color: transparent!important;
    .middle-content {
      @include df();
      align-items: center;
      .text {
        width: 80%;
      }
      .icon-sousuo {
        margin-left: auto;
      }
    }
    @include gaussBlur(.1rem);
    .navbar-bg {
      opacity: 0;
    }
  }
  .playlist-detail {
    margin-bottom: calc($playlistBarH / 2);
    position: relative;
    padding-top: $navHeight;
    height: 2.35rem;
    .description-box {
      will-change: auto;
      margin: .25rem .15rem 0;
      @include df();
      .img-box {
        flex-shrink: 0;
        width: 1.15rem;
        height: 1.15rem;
        background: #eee;
        border-radius: .1rem;
        position: relative;
        &:before {
          content: "";
          display: block;
          background-color: rgba(230, 230, 230, .3);
          border-radius: .1rem;
          height: .2rem;
          width: 90%;
          position: absolute;
          top: -$imgShadowH;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
        }
        img {
          width: 100%;
          aspect-ratio: 1;
          border-radius: .1rem;
        }
        span {
          @include df();
          justify-content: center;
          align-items: center;
          z-index: 3;
          position: absolute;
          right: .02rem;
          top: .05rem;
          padding: .02rem .06rem;
          font-size: .1rem;
          border-radius: .1rem;
          color: #f2eeee;
          background-color: rgba(43, 43, 43, .25);
          i {
            font-size: .08rem;
            font-weight: bold;
            margin-right: .02rem;
          }
        }
      }
      .info-box {
        height: 1.15rem;
        flex: 1;
        overflow: hidden;
        padding-left: .15rem;
        display: flex;
        flex-direction: column;
        .playlist-name {
          color: #fff;
          font-size: .16rem;
          line-height: 1.4;
        }
        .author {
          flex: 1;
          color: #d7dadd;
          font-size: .1rem;
          padding-top: .12rem;
          
          img {
            width: 0.25rem;
            height: 0.25rem;
            border-radius: 50%;
            margin-right: .06rem;
          }
          img, span {
            vertical-align: middle;
          }
        }
        .playlist-description {
          font-size: .12rem;
          color: #d8d8d8;
          padding-bottom: .05rem;
          @include df();
          align-items: center;
          span {
            flex: 1;
          }
          i {
            font-size: .12rem;
          }
        }
      }
    }
    .description-bg {
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      @include df();
      justify-content: center;
      z-index: -2;
      // 背景
      .detail-bg.bg-outer {
        position: absolute;
        top: 0;
        width: 280%;
        border-radius: 0 0 50% 50%;
        @include df();
        justify-content: center;
        .bg-inner {
          width: 100vw;
        }
      }
      @include gaussBlur(.3rem, .6, 1rem);
    }
    .playlist-bar {
      will-change: auto;
      color: $black;
      @include df();
      justify-content: space-around;
      margin: 0 auto;
      align-items: center;
      background-color: #fff;
      border-radius: 1rem;
      padding: 0 .1rem;
      width: 2.8rem;
      height: $playlistBarH;
      transform: translateX(-50%);
      position: absolute;
      bottom: calc($playlistBarH / -2);
      left: 50%;
      box-shadow: 0px 2px 8px -6px $black;
      &>div {
        flex: 1;
        @include df();
        justify-content: center;
        align-items: center;
        position: relative;
        &:active {
          color: #bebebe;
        }
        &:nth-last-child(n+2) {
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 90%;
            background-color: #e9e9e9;
          }
        }
        .iconfont {
          font-size: .2rem;
        }
        span {
          font-size: .12rem;
          padding-left: .06rem;
        }
      }
      .grey-color {
        color: #bebebe;
      }
    }
  }
  .playlist-song {
    .playlist-title {
      padding: .12rem .15rem .12rem;
      @include df();
      align-items: center;
      background-color: #fff;
      .iconfont {
        font-size: .2rem;
      }
      .icon-bofang1 {
        font-size: .24rem;
        color: red;
      }
      .title-text {
        flex: 1;
        font-weight: bold;
        display: flex;
        align-items: center;
        padding-left: .12rem;
        span {
          padding-left: .08rem;
          font-weight: normal;
          font-size: .12rem;
          color: #989898;
        }
      }
      .icon-xiazai1 {
        color: $black;
      }
      .icon-gouxuanzeyemian {
        padding-left: .2rem;
      }
    }
    .songlist {
      content-visibility: auto;
      // .list-item {
      // }
    }
  }

  .toTop {
    position: fixed;
    bottom: .3rem;
    right: .06rem;
    width: .4rem;
    height: .4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .2rem;
    transform: rotate(90deg);
    background: rgba(110, 110, 110, 0.6);
    border-radius: 50%;
    color: #fff;
    &.topMore {
      bottom: .6rem;
    }
  }

  .pop-up {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;

    .icon-chacha {
      position: fixed;
      right: .1rem;  
      top: 0.1rem;
      font-size: .22rem;
      color: #f0f3f5;
    }
    .inner-box {
      @include df();
      flex-direction: column;
      height: 100%;
      .top {
        height: 90%;
        overflow: scroll;
        .img {
          margin-top: .7rem;
          @include df();
          justify-content: center;
          img {
            width: 55%;
            max-width: 2.5rem;
            aspect-ratio: 1;
            border-radius: .2rem;
          }
        }
        .name {
          padding: .2rem 0 .36rem;
          color: #f8f8f8;
          text-align: center;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: .1rem;
            width: 100%;
            height:.5px;
            background: linear-gradient(to right, transparent 0%, rgba(199, 199, 199, 0.6) 45%, rgba(199, 199, 199, 0.6) 55%, transparent 100%);
          }
        }
        .des-tagbox {
          font-size: .12rem;
          color: #f0f0f0;
          display: flex;
          align-items: center;
          &>span {
            padding-right: .06rem;
          }
          .des-tag {
            font-size: .1rem;
            line-height: 1;
            margin: 0 .04rem;
            padding: .06rem .1rem;
            border-radius: .2rem;
            background-color: rgba(196, 198, 201, 0.3);
          }
        }
        .des-content {
          padding-top: .16rem;
          font-size: .11rem;
          color: #f7f7f7;
          line-height: 1.8;
        }
        .name, .des-tagbox, .des-content {
          margin: 0 .3rem;
        }
      }
      .bottom {
        height: 10%;
        flex-shrink: 0;
        @include df();
        justify-content: center;
        align-items: center;
        span {
          padding: .06rem .09rem;
          color: #eee;
          border-radius: 1rem;
          border: 1px solid #eee;
          font-size: .11rem;
          line-height: 1;
        }
      }
    }
    .popup-bg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
    @include gaussBlur(.3rem, .6, .8rem);
  }
}